<!DOCTYPE html>
<html class="ie9">
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>LMS</title>
    <link rel="icon" href="#(ctx)/static/img/icon.png" type="image/x-icon">
    <link href="#(ctx)/static/css/material-design-iconic-font.min.css" rel="stylesheet">
    <link href="#(ctx)/static/css/app_1.min.css" rel="stylesheet">
</head>

<body>
<div class="login-content">
    <div class="lc-block toggled" id="l-login">
        <div class="lcb-form">
            <form id="loginForm" onsubmit="return false;">
                <div class="input-group m-b-20">
                    <span class="input-group-addon"><i class="zmdi zmdi-account"></i></span>
                    <div class="fg-line">
                        <input id="username" type="text" class="form-control" name="username" placeholder="Username"
                               required>
                    </div>
                </div>

                <div class="input-group m-b-20">
                    <span class="input-group-addon"><i class="zmdi zmdi-male"></i></span>
                    <div class="fg-line">
                        <input id="password" type="password" class="form-control" name="password" placeholder="Password"
                               required>
                    </div>
                </div>

                <a href="javascript:;"  class="btn btn-login btn-success btn-float" id="custom-btn"><i
                        class="zmdi zmdi-arrow-forward">
                </i></a>
            </form>
        </div>
    </div>
</div>

<script src="#(ctx)/static/easyui/jquery.min.js"></script>
<script src="http://static.geetest.com/static/tools/gt.js"></script>
<script>
    function login() {
        var url = "#(ctx)/userLogin";
        var data = $("#loginForm").serialize();
        $.post(url, data, function (response) {
            console.log(response);
            window.location.href = "#(ctx)/";
        }, 'text');
    }

    $(function () {
        initGeetest({
            // 以下配置参数来自服务端 SDK
            gt: '#(gtdata.gt)',
            challenge: '#(gtdata.challenge)',
            offline: false,
            new_captcha: true
        }, function (captchaObj) {
            captchaObj.bindButton('#custom-btn');
            captchaObj.bindForm('#loginForm');
            captchaObj.onSuccess(function () {
                var result = captchaObj.getValidate();
                var username = $("#username").val();
                var password = $("#password").val();
                if (result && username.length != 0 && password.length != 0) {
                    login();
                }else {
                    captchaObj.reset();
                }
            });
        })
    })
</script>
</body>
</html>
